<template>
  <div class="nav_main">
    <div>
      <!-- 自动按角色加载菜单导航 -->
      <el-menu class="u_menu" :default-active="activeIndex" router>
        <!-- 训练遍历数据，根据leaf属性的值加载多级菜单还是单级菜单 -->
        <template v-for="item in routesData">
          <!-- 通过leaf属性选择不同的菜单格式 -->
          <el-submenu
            v-if="!item.leaf && item.menuShow && checkRole(item.meta.roles)"
            :key="item.path"
            index="3"
            class="u_menu"
          >
            <!-- 分组菜单标题 -->
            <template slot="title">
              <i :class="item.icoClass"></i>
              <span slot="title" class="text">{{ item.name }}</span>
            </template>
            <el-menu-item-group class="u_menu">
              <template v-for="trem in item.children">
                <el-menu-item
                  v-if="trem.menuShow && checkRole(item.meta.roles)"
                  :key="trem.path"
                  :index="trem.path"
                >
                  <span slot="title">
                    {{ trem.name }}
                  </span>
                </el-menu-item>
              </template>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item
            v-else-if="item.leaf && item.menuShow && checkRole(item.meta.roles)"
            :key="item.path"
            :index="item.path"
          >
            <i :class="item.icoClass"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
        <!-- 注意这里遍历要加上key标识唯一，官方文档这里没有写全 -->
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavComonents",
  data() {
    return {
      activeIndex: "/index", //默认打开的页面选项
      routesData: JSON.parse(localStorage.getItem("route")), //注意使用前先将字符串类型转换成对象类型
      userRole: JSON.parse(localStorage.getItem("User")).user_role,
    };
  },
  mounted() {
    //加载完打印检查一下是否加载成功
    // console.log("路由表信息:"+JSON.stringify(this.routesData));
    // console.log(this.userRole);
  },
  methods: {
    //验证权限
    checkRole(roles) {
      // console.log(roles);
      return roles.includes(this.userRole);
    },
  },
};
</script>

<style scoped>
.nav_main {
  width: 220px;
}

.nav {
  position: relative;
}

.nav .item {
  height: 38px;
  line-height: 38px;
  text-align: left;
  padding: 0 15px;
}

.nav .item:hover {
  background: rgba(152, 196, 240, 0.6);
  cursor: pointer;
}
.nav .item i {
  color: #ffffff;
  font-size: 16px;
  margin-right: 8px;
}

a.link {
  font-size: 14px;
  color: #ffffff;
  display: block;
  width: 100%;
  height: 30px;
}

/* elementui 自定义样式 */
.u_menu {
  background: rgb(13, 116, 219);
}

.el-menu-item,
.el-menu-item i,
div.el-submenu__title i {
  color: #ffffff;
}

.el-menu-item:hover {
  background: rgba(152, 196, 240, 0.6);
}

.el-menu-item.is-active {
  color: #ffffff;
  background: rgba(152, 196, 240, 0.6);
}

.text {
  color: #ffffff;
}

/*分组标签样式修改不生效 新版本使用::v-deep才可以，/deep/无效 */
::v-deep .el-submenu .el-submenu__title:hover {
  background: rgba(152, 196, 240, 0.6);
}

::v-deep .el-menu-item-group__title {
  padding: 0;
}
</style>